<script setup lang="ts">
	import { theme } from '@/store/module/theme'
	import { ref } from 'vue'
	import category from './components/category/index.vue'

	const search = ref('')

	// 获取屏幕边界到安全区域距离
	const { safeAreaInsets } = uni.getSystemInfoSync()

	const tabsList = ref([
		{
			name: 'vue',
			id: 0
		},
		{
			name: 'react',
			id: 1
		},
		{
			name: 'uniapp',
			id: 2
		},

		{
			name: 'ios',
			id: 3
		},

		{
			name: 'webpack',
			id: 4
		},

		{
			name: 'node',
			id: 5
		},
		{
			name: 'php',
			id: 6
		},
		{
			name: 'java',
			id: 7
		},

	])


	const currentId = ref(0)
	const handleIdxChange = (e) => {
		const { id } = e
		currentId.value = id
		console.log(e, '---');
	}
</script>

<template>

	<view :class="theme()" class="w-full home_box min-h-[100vh]"
		:style="{background:'var(--Gradient-color)',paddingTop: safeAreaInsets?.top + 'px'}">

		<view class="search w-[80%] m-[0_auto] h-auto flex justify-center items-center py-[10rpx]">
			<u-search placeholder="日照香炉生紫烟" v-model="search" placeholderColor="#008080" :showAction="false"></u-search>
		</view>
		<u-tabs :list="tabsList" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
		            color: '#f56c6c',
		            fontWeight: 'bold',
		            transform: 'scale(1.25)'
		        }" :inactiveStyle="{
		            color: 'var(--text-color)',
		            transform: 'scale(1)'
		        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="handleIdxChange">
		</u-tabs>
		<view class="content">
			<category :id='currentId' />
		</view>
	</view>
</template>